<template>
  <div id="home">

    <nav-bar class="home-nav"><template v-slot:center>购物街</template></nav-bar>
    <!-- <nav-bar class="home-nav"><template #center>购物街</template></nav-bar> -->
      <tab-control :titles="['新款','潮流','经典']" 
      @click="tabClick"
      ref="tabControl2"
      v-show="isTabShow"
      />    

    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="contentScroll"
      @pullingUp="loadMore"
    >
      <home-swiper :banners="banners" @homeSwiperLoad="homeSwiperLoad" :key="home_swiper " /> 
      <home-recommend-view :recommends="recommends"/>
      <feature-view/>
      <tab-control :titles="['新款','潮流','经典']" 
      @click="tabClick"
      ref="tabControl1"
      v-show="!isTabShow"
      />
      <goods-list :goods="showGoods"/>

      <ul>
        <li>10</li>
        <li>20</li>
        <li>30</li>
        <li>40</li>
        <li>50</li>
        <li>60</li>
        <li>70</li>
        <li>80</li>
        <li>90</li>
        <li>100</li>
        <li>110</li>
        <li>120</li>
        <li>130</li>
        <li>140</li>
        <li>150</li>
        <li>160</li>
        <li>170</li>
        <li>180</li>
        <li>190</li>
        <li>200</li>
        <li>210</li>
        <li>220</li>
        <li>230</li>
        <li>240</li>
        <li>250</li>
        <li>260</li>
        <li>270</li>
        <li>280</li>
        <li>290</li>
        <li>300</li>
        <li>310</li>
        <li>320</li>
        <li>330</li>
        <li>340</li>
        <li>350</li>
        <li>360</li>
        <li>370</li>
        <li>380</li>
        <li>390</li>
        <li>400</li>
        <li>410</li>
        <li>420</li>
        <li>430</li>
        <li>440</li>
        <li>450</li>
        <li>460</li>
        <li>470</li>
        <li>480</li>
        <li>490</li>
        <li>500</li>
        <li>510</li>
        <li>520</li>
        <li>530</li>
        <li>540</li>
        <li>550</li>
        <li>560</li>
        <li>570</li>
        <li>580</li>
        <li>590</li>
        <li>600</li>
        <li>610</li>
        <li>620</li>
        <li>630</li>
        <li>640</li>
        <li>650</li>
        <li>660</li>
        <li>670</li>
        <li>680</li>
        <li>690</li>
        <li>700</li>
        <li>710</li>
        <li>720</li>
        <li>730</li>
        <li>740</li>
        <li>750</li>
        <li>760</li>
        <li>770</li>
        <li>780</li>
        <li>790</li>
        <li>800</li>
        <li>810</li>
        <li>820</li>
        <li>830</li>
        <li>840</li>
        <li>850</li>
        <li>860</li>
        <li>870</li>
        <li>880</li>
        <li>890</li>
        <li>900</li>
        <li>910</li>
        <li>920</li>
        <li>930</li>
        <li>940</li>
        <li>950</li>
        <li>960</li>
        <li>970</li>
        <li>980</li>
        <li>990</li>
        <li>1000</li>
      </ul>

    </scroll>

    <back-top @backClick="backClick" v-show="isBackShow" />

  </div>
</template>

<script>
  import NavBar from 'components/common/navbar/NavBar'
  import TabControl from 'components/content/tabControl/TabControl'
  import GoodsList from 'components/content/goods/GoodsList'
  import Scroll from 'components/common/scroll/Scroll'
  import BackTop from 'components/content/backTop/BackTop'

  import HomeSwiper from './childComps/HomeSwiper'
  import HomeRecommendView from './childComps/HomeRecommendView'
  import FeatureView from './childComps/FeatureView'

  import {getHomeMultidata,getHomeGoods} from 'network/home'
  import {debounce} from 'common/utils'

export default {
  name: 'Home',
  components: {
    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,

    HomeSwiper,
    HomeRecommendView,
    FeatureView

  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        'pop': {page: 0,list: []},
        'new': {page: 0,list: []},
        'sell': {page: 0,list: []},
      },
      currtentType: 'pop',
      isBackShow: false,
      isTabShow: false,
      tabControlTop: null,
      saveY: 0,
      home_swiper : 0
    }
  },
  //生命周期函数
  created() {
    //请求多个数据
    this.getHomeMultidata()
    //商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
    // 回到定位位置
    activated() {
      this.$refs.scroll.scrollTo(0, this.saveY, 0)
    },
    // 记录离开首页此时的高度
    deactivated() {
      this.saveY = this.$refs.scroll.getSaveY()
    },
  //mounted挂载
  mounted() {
    debounce(this.$refs.scroll.refresh,500)
    setTimeout(() => {
      this.forceRerender()
    }, 400);
  },
  methods: {
    //网络请求
    getHomeMultidata() {
      getHomeMultidata().then(res => {
      // console.log(res);
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      })
    },
    getHomeGoods(type) {
      //this.goods[type]对应对象
      const page = this.goods[type].page + 1
      getHomeGoods(type,page).then(res => {
        //该语法可以将数组导入到新数组中
        // this.goods[type].list.push(...res.data.list);API接口重置无法使用
        console.log(res);
        this.goods[type].page += 1
        // this.$refs.scroll.finishPullUp()
      })
    },
    //事件监听
    tabClick(index) {
      switch(index) {
        case 0 : 
        this.currtentType = 'pop'
        break
        case 1 :
          this.currtentType = 'new'
          break
        case 2 : 
          this.currtentType = 'sell'
      }

      this.$refs.tabControl1.currtentIndex = index
      this.$refs.tabControl2.currtentIndex = index
    },
    contentScroll(position) {
      //backtop是否显示
      this.isBackShow = (-position.y) > 1000
      //是否吸顶
      this.isTabShow = (-position.y) > this.tabControlTop -44
    },
    loadMore() {
      this.getHomeGoods(this.currtentType)
    },
    homeSwiperLoad() {
      this.tabControlTop = this.$refs.tabControl1.$el.offsetTop
    },
    backClick() {
      this.$refs.scroll.scrollTo(0,0)
    },
    forceRerender() {
      this.home_swiper += 1; 
    },
  },
  computed: {
    showGoods() {
      return this.goods[this.currtentType].list
      }
   }
  }
</script>

<style scoped>
  #home {
    height: 100vh;
  }
  .home-nav {
    background-color: pink;
    color: #fff;
    font-weight: 700;

    /* position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9; */
  }
  .content {
    height: calc(100% - 93px);
    overflow: hidden;
  }
</style>